<template>
  <div>
  	<transition name="tab">
  		<tabbar v-show="isShow" id="tabbar">
      <tabbar-item link="/sell" selected>
        <img slot="icon" src="./assets/logo/waipai.png">
        <span slot="label">外卖</span>
      </tabbar-item>
      <tabbar-item link="/find">
        <img slot="icon" src="./assets/logo/faxian.png">
        <span slot="label">发现</span>
      </tabbar-item>
      <tabbar-item link="/order">
        <img slot="icon" src="./assets/logo/dingdan.png">
        <span slot="label">订单</span>
      </tabbar-item>
      <tabbar-item link="/person">
        <img slot="icon" src="./assets/logo/geren.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  	</transition>
    
    <transition :name="animateType">
   		 <router-view></router-view>
    	
    </transition>

  </div>
</template>

<script>
	import {Tabbar,TabbarItem} from 'vux'
	export default{
		name:'app',
		data:function(){
			return{
				animateType:'none',
				isShow:true
			}			
		},
		watch:{
			$route:function(to,from){
				var toLevel = to.path.split('/').length
				var fromLevel = from.path.split('/').length
				if(toLevel == fromLevel){
					this.animateType = 'none'
				}else if(toLevel > fromLevel){
					this.animateType = 'in'
				}else{
					this.animateType = 'out'
				}			
				if(toLevel>2){
					this.isShow = false
				}else{
					this.isShow = true
				}
			}
		},
		components: {
    Tabbar,
    TabbarItem,
  	}
	}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

*{  box-sizing: border-box;
 		list-style: none;
}
body {
  background-color: #f4f4f4;

}
a{color: black;}

/*进入的动画*/
.in-enter-active,.in-leave-active{
	transition:all 0.5s;
	position: absolute;
}
.in-enter{
	transform:translateX(100%);
}
.in-leave-active{
	transform:translateX(-100%)
}
/*退出的动画*/
.out-enter-active,.out-leave-active{
	transition:all 0.5s;
	position: absolute;
	
}
.out-enter{
	transform:translateX(-100%);
}
.out-leave-active{
	transform:translateX(100%)
}

/*tab的动画*/
.tab-enter-active,.tab-leave-active{
	transition: all 1s;
}
.tab-enter{
	transform:translateY(100%);
}
.tab-leave-active{
	transform:translateY(100%);
}

#tabbar{position: fixed;bottom: 0px;}
</style>
